<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" scrollable persistent max-width="1080px">
      <v-card>
        <v-card-title>
          <span>转团</span>
        </v-card-title>
        <v-card-text>
          <v-row>
            <v-col>
              <calendar
                ref="calendar"
                style="width:700px;"
                :min-date="new Date()"
                :max-date="dayjs().add(6, 'month').format('YYYY-MM-DD')"
                @update:to-page="handleMonthChange"
              >
                <div slot="day-content" slot-scope="{ day }" class="calendar-body-item">
                  <div>
                    <div class="calendar-body-item_date">{{ day.day }}</div>
                    <div>
                      <!-- <span style="color: #f94570;font-size: 12px;">{{day.date}}</span> -->
                    </div>
                  </div>
                </div>
              </calendar>
            </v-col>
            <v-col>
              <v-card>
                <v-card-title class="py-0">
                  <small>基础设置</small>
                </v-card-title>
                <v-row>
                  <v-col>1</v-col>
                </v-row>
              </v-card>
            </v-col>
          </v-row>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="dialog = false">取消</v-btn>
          <v-btn color="primary" text @click="dialog = false">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import Calendar from "v-calendar/lib/components/calendar.umd";
import dayjs from "dayjs"

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Calendar,
  },
  computed: {
    dialog: {
      get() {
        return this.show
      },
      set(bool) {
        this.$emit('update:show', bool)
      }
    }
  },
  data() {
    return {
      panel: [0, 1],
    }
  },
  methods: {
    dayjs,
    handleMonthChange() {
      console.log(1)
    }
  }
}
</script>

<style scoped>
.calendar-body-gray {
  padding: 0 10px;
  outline: 1px solid #e1e1e1;
  color: #999;
  height: 80px;
  overflow: hidden;
  position: relative;
  background: #f1f1f1;
}
.calendar-body-item {
  padding: 0 10px;
  outline: 1px solid #e1e1e1;
  height: 80px;
  overflow: hidden;
  position: relative;
  background: #fff;
  z-index: 1;
}
.calendar-body-item.checked {
  /* outline: 1px solid #2d8cf0; */
  /* z-index: 2; */
  background: #eaf3fd;
}
.calendar-body-item.disable {
  background: #f1f1f1;
}
.calendar-body-item_date {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
}
</style>